<template>
  <div class="skin">
    <div
      class="skin__item"
      :key="index"
      :class="{ skin__checked: columns === column }"
      @click="columns = column"
      v-for="(column, index) in 3"
    >
      <img
        src="@/assets/resume/format.png"
        :key="num"
        :style="{ width: `calc(${100 / column}% - 5px)` }"
        v-for="num in column"
      />
    </div>
  </div>
</template>

<script>
import { watch, ref } from "vue";

export default {
  name: "skin",
  props: {
    modelValue: Number,
  },
  setup(props, ctx) {
    const columns = ref(props.modelValue);
    watch(columns, (newVal) => {
      ctx.emit("update:modelValue", newVal);
    });
    watch(
      () => props.modelValue,
      (newVal) => {
        columns.value = newVal;
      }
    );
    return {
      columns,
    };
  },
};
</script>

<style scoped lang="less">
.skin {
  position: absolute;
  right: 0;
  top: 30px;
  width: 248px;
  padding: 10px 15px 0 15px;
  border: whitesmoke 1px solid;
  box-shadow: 10px 10px 10px whitesmoke;
  z-index: 3;
  background: white;

  .skin__checked {
    border: 1px solid lightskyblue;

    /*&:after {*/
    /*  content: "";*/
    /*  background: url("~@/assets/resume/checked.svg");*/
    /*  background-size: contain;*/
    /*  width: 30px;*/
    /*  height: 27px;*/
    /*  position: absolute;*/
    /*  right: 0;*/
    /*  top: 0;*/
    /*}*/
  }

  > * {
    width: 228px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    padding: 9px;
    border: 1px solid whitesmoke;
    position: relative;
    cursor: pointer;
  }

  &:before {
    content: "";
    display: block;
    position: absolute;
    right: 23px;
    top: -10px;
    width: 0;
    height: 0;
    border-bottom: 10px whitesmoke solid;
    border-left: 10px transparent solid;
    border-right: 10px transparent solid;
  }

  &:after {
    content: "";
    display: block;
    position: absolute;
    right: 23px;
    top: -9px;
    width: 0;
    height: 0;
    border-bottom: 10px white solid;
    border-left: 10px transparent solid;
    border-right: 10px transparent solid;
  }
}
</style>
